<template>
	<view class="nick-name">
		<view class="nickName_search">
			<input type="text" v-model="nickNameSex" placeholder="偏好性别,默认不限,可以是:男/女" />
			<input type="text" v-model="nickNameLove" placeholder="偏好的语言，默认不限，可以是：中文/英文" />
			<text class="tips">若上面两项不填，则随机生成</text>
			<button @click="getContent()" type="primary">生成</button>
			<view class="showNickname">{{nickName || "你还没有生成哟..."}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nickNameSex: "",
				nickNameLove: "",
				nickName: ""
			}
		},
		methods: {
			async getContent() {
				const res = await this.$myRequest({
					url: "/?s=App.Common_Nickname.RandOne",
					method: "post",
					data: {
						need_sex: this.nickNameSex,
						need_lan: this.nickNameLove,
						app_key: "FF119DFB40E63EE8DFD7C74C8A9A4B8D"
					}

				})
				this.nickName = res.data.data.nickname
				// console.log(res.data.data.nickname)
			}
		}
	}
</script>

<style lang="scss">
	.nickName_search {
		width: 85%;
		height: 80rpx;
		margin: 30rpx auto;

		input {
			border: 1rpx solid #eee;
			flex: 1;
			height: 100%;
			padding-left: 20rpx;
			box-sizing: border-box;
			margin: 20rpx 10rpx;
			border-radius: 20rpx;
			font-size: 28rpx;
		}
		.tips{
			display:block;
			font-size: 20rpx;
			color:#bbb;
			margin-bottom: 20rpx;
			text-align:center;
		}
		button {
			height: 100%;
			border: none;
			line-height: 80rpx;
		}

		.showNickname {
			width: 80%;
			border: 1px dashed #eee;
			padding: 30rpx;
			text-align:center;
			margin: 20rpx auto;
		}
	}
</style>
